<script setup>
import { reactive, getCurrentInstance, ref } from 'vue'
import { onShow, onLoad, onUnload } from '@dcloudio/uni-app'
import { batchUpload } from '@/homePages/common/batchUpload'
import { matchFilePath } from '@/common/utils'
import { maintainStagingSaveWorkOrder, UPLOAD_FILE_URL } from '@/api/system'

const instance = getCurrentInstance()
const eventChannel = instance.proxy.getOpenerEventChannel()

const workerParams = reactive({
  uploadFiles: [],
  content: null,
  id: null
})
const orderStatusArr = ['DISPATCHED', 'HANDLED']

onLoad(async (option) => {
  /**
   * @description 接受维修工单列表点击传递的参数
   */
  eventChannel.on('getData', (data) => {
    //回填数据
    workerParams.content = data.content
    workerParams.id = data.id
    //回填上传图片数据
    if (data.filePath && data.filePath.length > 0) {
      const urlArr = data.filePath.split(',')
      workerParams.uploadFiles.length = 0
      const fileList = []
      urlArr.map((filePath) => {
        fileList.push(matchFilePath(filePath))
      })
      workerParams.uploadFiles = fileList
      console.log(workerParams.uploadFiles, '维修上传图片回显')
    }
  })
})

/**
 * @function 上传图片选择
 * @return {*}
 */
const uploadFileSelect = (e) => {
  const tempFilePaths = e.tempFilePaths

  tempFilePaths.map((filePath) => {
    batchUpload(
      {
        uploadUrl: UPLOAD_FILE_URL,
        filePath: filePath
      },
      null,
      (data) => {
        setUploadImg(data)
      }
    )
  })
}

/**
 * @function 维修工单暂存或提交
 * @param {*} installationStatus 0-暂存，1-提交
 * @return {*}
 */
const submitOnClick = (orderStatus) => {
  if (orderStatus === 1) {
    if (!workerParams.uploadFiles || workerParams.uploadFiles.length <= 0) {
      showToast('维修图片不能为空')
      return
    }
  }
  const filePath = workerParams.uploadFiles.map((item) => {
    return item.url
  })
  const params = {
    ...workerParams,
    orderStatus: orderStatusArr[orderStatus],
    filePath: filePath.length > 0 ? filePath.join(',') : ''
  }
  maintainStagingSaveWorkOrder(params).then((result) => {
    if (result.code == 200) {
      showToast(result.msg)
      uni.navigateBack()
    }
  })
}

const setUploadImg = (data) => {
  workerParams.uploadFiles.push(matchFilePath(data))
}

const showToast = (msg) => {
  uni.showToast({
    title: msg,
    icon: 'none',
    duration: 2000,
    mask: true
  })
}
</script>

<template>
  <view class="container">
    <uni-section title="维修图片" type="line">
      <view class="example-body">
        <uni-file-picker
          limit="3"
          title="最多选择3张图片"
          :auto-upload="false"
          v-model="workerParams.uploadFiles"
          @select="uploadFileSelect"
        />
      </view>
    </uni-section>
    <uni-section title="备注说明" type="line">
      <view style="padding: 10px">
        <uni-easyinput type="textarea" placeholder="请输入内容" v-model="workerParams.content" />
      </view>
    </uni-section>
    <view class="submitBox">
      <view class="warningBtn saveBtn" @click="submitOnClick(0)">
        <text>暂存</text>
      </view>
      <view class="primaryBtn" @click="submitOnClick(1)">
        <text>完成维修</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.example-body {
  padding: 10px;
  padding-top: 0;
}
.submitBox {
  display: flex;
  justify-content: flex-end;
  padding: 20upx;
  .saveBtn {
    margin-right: 32upx;
  }
}
</style>
